<template>
	<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :scroll-with-animation="true">
		<view class="signColor">
			<view class="signTop" style="margin-left: 30rpx; margin-right: 30rpx;">

				<image :src="signText.image" mode="" class="signTop-hospital"
					style="padding-left: 30rpx; padding-top: 30rpx;"></image>

				<view class="">
					<text class="signTop-text">{{signText.name}}</text>
					<view class="signTop-text2">地址：{{ signText.address }}</view>
					<view class="signTop-phone">
						<image src="/static/icons/phone.png" mode="" style="	width: 48rpx;
			height: 48rpx; margin-right: 20rpx;"></image>
						<image src="/static/icons/headphones.png" mode="" style="	width: 48rpx;
			height: 48rpx;"></image>
					</view>
				</view>
			</view>

			<!-- 机构简介 -->
			<view class=" intro-container" v-if="signText.length>0">
				<text style="
			font-style: normal;
			font-size: 38rpx;
			margin-left: 30rpx; margin-right: 30rpx;
			 ">机构简介</text>
				<view class="intro-text">
					{{ signText.intro }}
				</view>
			</view>


			<view class="intro-container">
				<view v-if="teamItem.length>0" style="
			font-style: normal;
			font-size: 38rpx; margin-left: 30rpx; margin-right: 30rpx;">
					医生团队
				</view>
				<view v-for="item in teamItem" :key="item._id" class="sign-box" @click="toTeamDoctor(item._id)"
					style="margin-left: 30rpx; margin-right: 30rpx;">
					<image :src="item.avatar" mode="" style="width: 160rpx; height: 160rpx;"></image>
					<view class="" style="display: flex; justify-content: space-between; align-items: center;">
						<view style="	display: flex;
										flex-direction:column;
										justify-content: space-between;
										align-items: flex-start;
										height: 200rpx;
										flex: 1;
										margin-left: 40rpx;
										">
							<text class="sign-text">{{item.name}}</text>
							<view class="signTop-text2">{{ item.organizationId?.name }}</view>
							<view class="sign-img">
								<image src="/static/icons/star.png" mode="" style="width: 56rpx; height: 60rpx;">
								</image>
								<image src="/static/icons/star.png" mode="" style="width: 56rpx; height: 60rpx;">
								</image>
								<image src="/static/icons/star.png" mode="" style="width: 56rpx; height: 60rpx;">
								</image>
								<image src="/static/icons/star.png" mode="" style="width: 56rpx; height: 60rpx;">
								</image>
								<image src="/static/icons/star.png" mode="" style="width: 56rpx; height: 60rpx;">
								</image>
								<span class="yellow-span">5.o</span>
							</view>

						</view>
						<image src="/static/icons/u1334.png" mode="" class="hostpital-box-image" style=""></image>
					</view>
				</view>

				<!-- 服务包 -->
				<view v-if="signItem.some(innerArr => innerArr.length > 0)>0" style="
				font-style: normal;
				font-size: 38rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				margin-left: 30rpx; margin-right: 30rpx;
				
				">
					服务包
				</view>
				<view v-for="(subItem, index) in signItem " :key="index"
					style="margin-left: 30rpx; margin-right: 30rpx;">
					<view v-for="item in subItem" :key="item._id" class="sign-box-1" @click="toOrder(item._id)">
						<image :src="item.image" mode="" style="width: 200rpx; height: 200rpx;margin-right: 40rpx;">
						</image>
						<view
							style="display: flex; flex-direction: column; text-align: left; justify-content: space-between; height: 200rpx;">
							<view
								style="display: flex;align-items: center;justify-content: space-between; width: 340rpx;">
								<text>{{item.name}}</text>
								<text
									style="font-style: normal;color: #FA746B;line-height: 56rpx;">￥{{item.price}}</text>
							</view>
							<view style="display: flex;" v-for="tag in item.tagIds" :key="tag._id">
								<uni-tag :text="tag.name" size="mini" :circle="true" type="error"></uni-tag>
							</view>
						</view>
					</view>
				</view>
				<!--  -->
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		getOrganizationsApi
	} from '../../../api/organization.js';
	import {
		ref
	} from 'vue';
	import {
		getServicePacksApi,
		getSignIdApi,
		getTeamApi
	} from '../../../api/sign.js';
	// import {
	// 	ColorGradient
	// } from 'XrFrame/components/particle/gradient';
	// import { useUserStore } from '../../../store/user';


	// 	const popupRef = ref(null)
	// 	const open = () => {
	// 		popupRef.value?.open()
	// 	}
	// 	const userStore = useUserStore()
	const signText = ref({});
	const teamItem = ref([]);
	const signItem = ref([]);

	onLoad((options) => {
		console.log(options);
		console.log(options._id);
		getOrganizations(options._id)
		getTeam(options)
		// getSign()
		getServicePacks(options._id)

	})

	function getOrganizations(options) {
		// console.log(options);
		getOrganizationsApi({
				_id: options
			})
			.then(res => {
				if (res.code == 200) {
					signText.value = res.data;
				}
			})
	}

	function getTeam(organizationId) {
		getTeamApi({
				organizationId: organizationId._id
			})
			.then(res => {
				if (res.code == 200) {
					teamItem.value = res.data.rows;
				}
			})
	}

	function getServicePacks(organizationId) {
		getServicePacksApi({
			organizationId: organizationId
		}).then(res => {
			if (res.code == 200) {
				signItem.value = res.data;
				console.log('signItem 的值：', signItem.value); // 打印出来查看具体数据
			}
		})
	}

	function toOrder(_id) {
		uni.navigateTo({
			url: '/SignPackage/pages/order-service-package/order-service-package?_id=' + _id
		})
	}

	function toTeamDoctor(_id) {
		console.log('选择的医生团队的id吗', _id); //存本地
		uni.setStorageSync('doctorTeamId', _id)
		uni.navigateTo({
			url: '/SignPackage/pages/team-doctor/team-doctor?_id=' + _id
		})
	}
	// function getSign(){
	// 	getSignApi({
	// 		residentId:userStore.userInfo?._id,

	// 	})
	// 	.then(res => {
	// 		if (res.code == 200) {
	// 			signItem.value = res.data;
	// 		}
	// 	})
	// }
</script>

<style>
	.sign-box {
		height: 268rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
		margin: 20rpx auto;
		padding-left: 20rpx;
		border-radius: 30rpx;
	}

	.sign-box-1 {
		height: 268rpx;
		border: 1px solid #eee;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
		margin: 20rpx auto 40rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		border-radius: 30rpx;
	}

	.signColor {
		background-color: #f6fafd;
	}

	.signTop {
		display: flex;
		padding-top: 40rpx;
	}

	.scroll-Y {
		position: absolute;
		top: 0;
		height: 100%;
		background-color: #f6fafd;
	}

	.yellow-span {
		color: #FDDB78;
		font-size: 28rpx;
		line-height: 56rpx;

	}

	.hostpital-box-image {
		width: 22rpx;
		height: 22rpx;
	}

	.signTop-text {
		font-weight: 1000rpx;
		font-style: normal;
		font-size: 36rpx;
		line-height: 56rpx;

	}

	.sign-img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: -10rpx;
	}

	.intro-text {
		color: #999999;
		line-height: 24px;
		font-size: 24rpx;
		margin-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.intro-container {
		margin: 50rpx 20rpx 50rpx;
	}


	.signTop-text2 {
		font-size: 24rpx;
		color: #999999;
		line-height: 27px;
		width: 400rpx;
		height: 54rpx;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏溢出 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.signTop-hospital {
		width: 240rpx;
		height: 240rpx;
	}

	.sign-text {
		font-weight: 400;
		font-style: normal;
	}
</style>